<script setup lang="ts">
  import { computed, ref } from 'vue'
  import password from './components/password.vue'
  import mobile from './components/mobile.vue'

  defineOptions({
    options: {
      styleIsolation: 'shared',
    },
  })

  const titleList = [
    { title: '密码登录', subTitle: '验证码登录' },
    { title: '验证码登录', subTitle: '密码登录' },
  ]
  const titleIndex = ref(0)
  const titleMeta = computed(() => {
    return titleList[titleIndex.value]
  })
  // const changeIndex = () => {
  //   titleIndex.value = Math.abs(titleIndex.value - 1)
  // }
</script>
<template>
  <view class="user-login">
    <view class="login-type">
      <view class="title">{{ titleMeta.title }}</view>
      <view class="type" @click="titleIndex = titleIndex === 0 ? 1 : 0">
        <!-- <view class="type" @click="changeIndex"> -->
        <text>{{ titleMeta.subTitle }}</text>
        <uni-icons color="#3c3e42" type="forward" />
      </view>
    </view>
    <password v-if="titleIndex === 0"></password>
    <mobile v-else></mobile>
  </view>
  <!-- 社交账号登录 -->
  <view class="social-login">
    <view class="legend">
      <text class="text">其它方式登录</text>
    </view>
    <!-- #ifdef  MP-WEIXIN -->
    <button type="primary" style="color: #ffffff; background-color: #16C2A3; border-color: #1aad19">
      手机号一键登录
    </button>
    <!-- #endif -->

    <!-- #ifdef H5  -->
    <view class="social-account">
      <view class="icon">
        <uni-icons color="#00b0fb" size="30" type="qq" />
      </view>
      <view class="icon">
        <uni-icons color="#fb6622" size="30" type="weibo" />
      </view>
      <view class="icon">
        <uni-icons color="#07C160" size="30" type="weixin" />
      </view>
    </view>
    <!-- #endif -->
  </view>
</template>

<style lang="scss">
  @import './login.scss';
</style>
